<template>
	<view class="">
		<view class="mx-my-arena-card" v-for="arena in order.fragments">
			<text class="arena-name">{{arena.arena}} ( {{arena.arena_part}} )</text>
<!-- 			<view v-if="haveReferee(order.referees)" class="booking-referee">
				裁判：{{getRefereesName(order.referees)}}
			</view> -->
			<view class="arena-info">
				<text class="usage-time">使用时间：{{arena.start_date}} {{arena.time_fragment}}</text>
				<text class="arena-price">实付款:￥{{arena.price}}</text>
			</view>
			<view >
				<!-- 已到场使用 -->
				<!-- <image v-if="hasPresent(arena)" class="already-used" mode="widthFix" src="/static/imgs/used-arena@hasPresent.png"></image> -->
				<!-- 已到期未使用 -->
				<!-- <image v-if="isInvalid(arena)" class="already-used" mode="widthFix" src="/static/imgs/used-arena.png"></image> -->
<!-- 				<button class="already-used">已使用</button>
				<button class="already-used">已到期</button> -->
				<button v-if="!isInvalid(arena) && !hasPresent(arena) && order.pay_status == 20" class="already-used" type="primary" @tap="onTap(arena)" >使用</button>
				<button v-if="order.pay_status == 30" size="mini" class="already-used" :disabled="loadding">已退款</button>
				<button v-else-if="!isInvalid(arena) && !hasPresent(arena) && order.pay_status == 20 && !isTheFirstTwoHours(arena)" class="already-used" size="mini" type="default"  @click.stop="refund(arena)" :disabled="loadding" :loading="loadding">退款</button>
				<button v-else-if="order.pay_status == 10" size="mini" class="already-used">未支付</button>
				<button v-else-if="hasPresent(arena)" size="mini" class="already-used">已使用</button>
				<button v-else-if="isInvalid(arena)" size="mini" class="already-used">已到期</button>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import * as arenaApi from '@/api/arena.js'	
	export default {
		name:"MxMyArenaCard",
		props: {
			order: {
				type: Object
			}
		},
		data() {
			return {
				loadding: false,
			};
		},
		mounted() {
			
		},
		computed: {
			// 是否已到期
			isInvalid() {
				return (arena) => {
					const { start_date, time_fragment } = arena
					const cardValidity = start_date + ' ' + time_fragment.split('-')[1];
					return dayjs().isAfter(dayjs(cardValidity))
				}
			},
			// 是否前两个小时
			isTheFirstTwoHours(){
				return (arena) => {
					const { start_date, time_fragment } = arena
					const cardValidity = start_date + ' ' + time_fragment.split('-')[1];
					return dayjs().isAfter(dayjs(cardValidity).add(-2, 'hour'))
				}
			},
			
			// 是否已到场
			hasPresent() {
				return arena => arena.used == 1
			},
			

			
		},
		methods: {
			onTap(arena) {
				uni.redirectTo({
					url: `/pages/mine/arena-code?id=${arena.id}`
				})
			},
			refund(){
				let self = this
				let content = '当前订单包含'+self.order.fragments.length+'个订场。\n'
				self.order.fragments.forEach(e => {
					content += e.arena + '（' +e.arena_part +'）' +e.start_date + ' ' + e.time_fragment + ' 退款金额为：' + e.price + ';\n '
				})
				content += '退款总金额为：'+ self.order.total_price
				// content = content.replace(/\\n/g,'\n')
				uni.showModal({
					title: '确认退款',
					content: content,
					success: function (res) {
						if (res.confirm) {
							self.loadding = true
							arenaApi.refund({order_no: self.order.order_no}).then(res => {
								if(res.status == 200){
									uni.navigateTo({
										url: `/pages/mine/my-arena`
									})
								}
							})
						} else if (res.cancel) {
							
						}
					}
				});
				

			},
			getRefereesName(referees) {
				const names = referees.map(refer => {
					return refer.referee_name
				})
				
				return names.join('、')
			},
			
			// 是否有裁判
			haveReferee(referees) {
				return referees.length > 0
			},

		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/var.scss';

.mx-my-arena-card{
	margin-bottom: 36rpx;
	position: relative;
	width: 100%;
	min-height: 186rpx;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 6px 0 rgba($color: #000000, $alpha: .16);
	font-family: $font-family;
	box-sizing: border-box;
	padding: 34rpx 44rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.booking-referee{
		margin: 22rpx 0 6rpx;
		font-size: 14px;
	}
	.arena-name{
		color: $color-title;
		font-size: 16px;
		font-weight: bold;
	}
	
	.arena-info{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		.usage-time{
			font-size: 12px;
		}
		
		.arena-price{
			font-size: 14px;
			font-weight: bold;
		}
	}
	
	.already-used{
		margin-top: 20rpx;
		margin-right: 10rpx;
		// position: absolute;
		// top: 0;
		// right: 0;
	}
}
</style>
